<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <title>权限管理</title>
        <meta name="description" content="">
        <meta name="keywords" content="">
        <link href="http://cdnjs.cloudflare.com/ajax/libs/nestable2/1.5.0/jquery.nestable.min.css" rel="stylesheet">
        <link href="https://cdn.bootcss.com/bootstrap/3.0.2/css/bootstrap.min.css" rel="stylesheet">
        <link href="/plugins/material-design-iconic-font-2.2.0/css/material-design-iconic-font.min.css"
              rel="stylesheet"/>
        <link href="https://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
        <link href="/plugins/waves-0.7.5/waves.min.css" rel="stylesheet"/>
        <link href="/plugins/jquery-confirm/jquery-confirm.min.css" rel="stylesheet"/>
        <link href="/plugins/awesome-bootstrap-checkbox/awesome-bootstrap-checkbox.css" rel="stylesheet"/>
        <!--select2-->
        <link href="https://cdn.bootcss.com/select2/4.0.3/css/select2.min.css" rel="stylesheet"/>
        <link href="/app/css/common.css" rel="stylesheet"/>
        <link href="/app/css/skins.css" rel="stylesheet"/>
        <style>
            .dd {

                max-width: 100%;
            }

            .dd-handle {
                display: inline-block;
                margin: 0px;
                border: 0px solid #ccc;
                background: rgba(0, 0, 0, 0);
            }

            .dd-handle:hover {
                background: rgba(0, 0, 0, 0);
                cursor: pointer;
            }

            .dd3-h {
                color: inherit;
                border: 1px dashed #e7eaec;
                background: #f0f3f4;
                padding: 5px;
                padding-top: 10px;
                display: block;
                margin: 5px 0;
                color: #333;
                text-decoration: none;
                border: 1px solid #e7eaec;
                background: #f5f5f5;
                border-radius: 3px;
                box-sizing: border-box;
                -moz-box-sizing: border-box;
            }

            .col {
                padding-left: 30px;

            }

            .i-btn {
                margin-top: -3px;
                padding: 3px 10px;
            }

            .dd-item > button {

                margin-top: 15px;
            }

            .ml10 {
                color: #000;
                margin: 0 5px;
            }

            .btn-group {
                width: 100%;
                height: 50px;
            }

            .radio-group {
                margin-bottom: 15px;
            }
        </style>
    </head>
    <body>
        <div id="main">
            <div class="btn-group">
                <a class="waves-effect waves-button" href="javascript:;" onclick="createAction()">
                    <i class="zmdi zmdi-plus"></i>
                    新增权限
                </a>
                <span class="pull-right">
                    <a class="waves-effect waves-button" href="javascript:;" onclick="collapseAll()">
                        <i class="zmdi zmdi-chevron-up"></i>
                        折叠
                    </a>
                    <a class="waves-effect waves-button" href="javascript:;" onclick="expandAll()">
                        <i class="zmdi zmdi-chevron-down"></i>
                        展开
                    </a>
                </span>

            </div>
            <div class="dd" id="nestable">
                <ol id="dd-empty-ol" class='dd-list dd3-list'>
                </ol>
            </div>
        </div>

        <script src="/plugins/jquery.1.12.4.min.js"></script>
        <script src="http://cdnjs.cloudflare.com/ajax/libs/nestable2/1.5.0/jquery.nestable.min.js"></script>
        <script src="/plugins/waves-0.7.5/waves.min.js"></script>
        <script src="/plugins/jquery-confirm/jquery-confirm.min.js"></script>

        <!--给form使用-->
        <!-- select2 -->
        <script src="https://cdn.bootcss.com/select2/4.0.3/js/select2.min.js"></script>
        <script src="https://cdn.bootcss.com/select2/4.0.3/js/i18n/zh-CN.js"></script>

        <script src="/app/js/common.js"></script>
        <script src="/app/js/i-ajax.js"></script>
        <script>
            jconfirm.defaults = {
                theme: 'material',
            };

            function getMenuTree(fc) {
                iGet('/api/menus', function (data) {
                    fc(data);
                }, function () {
                    $.alert({
                        title: false,
                        theme: 'dark',
                        content: '加载数据失败',
                    });
                })
            }

            function updateMenu(data) {
                iPut('/api/menus/' + data.id, data, null, function (data) {
                    console.log("update Menu success!");
                });
            }

            function deleteMenu(ids, cb, ecb) {
                iDelete('/api/menus', ids, null, cb, ecb);
            }

            var $nestable = $('#nestable');
            Waves.displayEffect();

            function collapseAll() {
                $nestable.nestable('collapseAll');
            }

            function expandAll() {
                $nestable.nestable('expandAll');
            }

            //    https://github.com/RamonSmit/Nestable2
            var obj = '[{"id":1,"name":"name","depth":1,"icon":"zmdi zmdi-book","href":"href","permission":"permission"},{"id":2,"name":"name","depth":1,"icon":"zmdi zmdi-plus","href":"href","permission":"permission"},{"id":3,"name":"name","depth":1,"icon":"zmdi zmdi-plus","href":"href","permission":"permission","children":[{"id":4,"name":"name","depth":2,"icon":"zmdi zmdi-plus","href":"href","permission":"permission"},{"id":5,"name":"name","depth":2,"icon":"zmdi zmdi-plus","href":"href","permission":"permission"}]}]';
            var output = '';

            function buildItem(item) {
                console.log(item);
                var depthName = item.depth == 1 ? '系统' : item.depth == 2 ? '目录' : '菜单';
                var depthLable = item.depth == 1 ? 'label-primary' : item.depth == 2 ? 'label-success' : 'label-info';
                var html = "<li class='dd-item ' data-id='" + item.id + "'>";
                var span = "";
                if (item.depth == 1) {
                    span = "<span class='dd-handle dd3-handle'><span class=' " + item.icon + "'>&nbsp;&nbsp;&nbsp;" + item.name + "</span>&nbsp;&nbsp;<span class='label " + item.skin + "'>" + depthName + "</span></span>";
                } else {
                    span = "<span class='dd-handle dd3-handle'><span class=' " + item.icon + "'>&nbsp;&nbsp;&nbsp;" + item.name + "</span>&nbsp;&nbsp;<span class='label " + depthLable + "'>" + depthName + "</span></span>";
                }
                if (item.depth == 3) span += "<span class='col col-text'> 地址链接 :" + item.url + " permission " + item.permission + "</span>";
                span += "<span class='pull-right col'>"
                span += '<a class="edit ml10" href="javascript:updateAction(' + item.id + ')" data-toggle="tooltip" title="Edit"><i class="glyphicon glyphicon-edit"></i></a>'
                span += '<a class="remove ml10" href="javascript:deleteAction(' + item.id + ')" data-toggle="tooltip" title="Remove"><i class="glyphicon glyphicon-remove"></i></a>'
                span += "</span>"
                html += "<div class='dd3-h'>" + span + "</div>";

                if (item.children) {
                    html += "<ol class='dd-list' data-pid =" + item.id + ">";
                    $.each(item.children, function (index, sub) {
                        html += buildItem(sub);
                    });
                    html += "</ol>";

                }
                html += "</li>";

                return html;
            }

            getMenuTree(function (data) {
                $.each(data, function (index, item) {
                    output += buildItem(item);
                });
            })

            $('#dd-empty-ol').append(output);
            $nestable.nestable({
                callback: function () {
                    function buildMenu(obj) {
                        return {
                            id: obj.id,
                            depth: obj.depth,
                            sort: obj.left,
                            parent: {
                                id: obj.parent_id ? obj.parent_id : 1
                            }
                        }
                    }

                    $nestable.nestable('toArray').forEach(function (obj) {
                        updateMenu(buildMenu(obj));
                    });
                }, maxDepth: 3
            });
            //折叠
            $nestable.nestable('collapseAll');

            //node: {"id":1,"name":"name","icon":"zmdi zmdi-book","href":"href","permission":"permission"}
            function updateNestableNode(node) {
                console.log('update=>', node);
                var depthName = node.depth == 1 ? '系统' : node.depth == 2 ? '目录' : '菜单';
                var depthLable = node.depth == 1 ? node.skin : node.depth == 2 ? 'label-success' : 'label-info';
                var span = "<span class=' " + node.icon + "'>&nbsp;&nbsp;&nbsp;" + node.name + "</span>&nbsp;&nbsp;<span class='label " + depthLable + "'>" + depthName + "</span>";
                $('li[data-id=' + node.id + ']>div>.dd-handle').html(span);
                if (node.depth == 1) $('li[data-id=' + node.id + '] .col-skin').text('skin :' + node.skin);
                if (node.depth == 3) $('li[data-id=' + node.id + '] .col-text').text('地址链接 :' + node.url + ' permission ' + node.permission);
            }

            function addNestableNode(pid, node) {
                if (pid) {
                    //添加子节点
                    var $children_ol = $('ol[data-pid=' + pid + ']');
                    if ($children_ol.length == 0) {
                        $('li[data-id=' + pid + ']').prepend('<button class="dd-expand" data-action="expand" type="button">Expand</button><button class="dd-collapse" data-action="collapse" type="button">Collapse</button>');
                        $('li[data-id=' + pid + ']').append('<ol class="dd-list" data-pid="' + pid + '"></ol>');
                        $children_ol = $('ol[data-pid=' + pid + ']');
//                console.log('添加子节点');
                    }
                    $children_ol.append(buildItem(node));
                } else {
                    //添加根节点
                    $('#dd-empty-ol').append(buildItem(node));
                }
            }

            var createOrUpdateDialog;

            var updateId = 0;


            function createAction() {
                updateId = 0;
                createOrUpdateDialog = $.dialog({
                    animationSpeed: 300,
                    title: '新增权限',
                    content: 'url:/page/sys/menu/form.html',
                    onContentReady: function () {
                        initMaterialInput();
                    }
                });
            }

            function updateAction(id) {
//        console.log(id);
                updateId = id;
                createOrUpdateDialog = $.dialog({
                    animationSpeed: 300,
                    title: '編輯权限',
                    content: 'url:/page/sys/menu/form.html',
                    onContentReady: function () {
                        initMaterialInput();
                    }
                });
            }

            function deleteAction(id) {
                $.confirm({
                    type: 'red',
                    animationSpeed: 300,
                    title: false,
                    content: '确认删除？',
                    buttons: {
                        confirm: {
                            text: '确认',
                            btnClass: 'waves-effect waves-button',
                            action: function () {
                                var ids = [id];
                                deleteMenu(ids, function (data) {
                                    $('.dd').nestable('remove', id);
                                }, function (data) {
                                    console.log(data)
                                })
                            }
                        },
                        cancel: {
                            text: '取消',
                            btnClass: 'waves-effect waves-button'
                        }
                    }
                });
            }
        </script>
    </body>
</html>